<template>
  <div id="shopCart">
    <el-card>
      <el-row>
        <div class="fl top10"><span style="font-size: 1.3em;color: #489EFE">全部商品：{{total}}</span></div>
        <div class="fr">
          <span>配送至：</span>
          <el-select v-model="address" placeholder="请选择收货地址">
            <el-option
                v-for="(item,index) in userInfo.address"
                :key="index"
                :label="item"
                :value="item">

            </el-option>
          </el-select>
        </div>
      </el-row>
      <el-row class="top20" style="padding: 20px">
        <el-col :span="4"><el-checkbox v-model="allChecked">全选</el-checkbox></el-col>
        <el-col :span="10"><span>商品</span></el-col>
        <el-col :span="2"><span>单价</span></el-col>
        <el-col :span="4"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数量</span></el-col>
        <el-col :span="2"><span>小记</span></el-col>
        <el-col :span="2"><span>操作</span></el-col>
      </el-row>
      <el-card shadow="none" v-for="(item,index) in shopCart" :key="index">
        <el-row>
          <el-col :span="1"><el-checkbox v-model="item.checked"></el-checkbox></el-col>
          <el-col :span="3"><el-image :src="item.imgUrl"></el-image></el-col>
          <el-col :span="10"><span>{{item.name}}</span></el-col>
          <el-col :span="2"><span>￥{{item.unitprice}}</span></el-col>
          <el-col :span="4"><span><el-input-number v-model="item.count" :min="1" size="mini" label="描述文字"></el-input-number></span></el-col>
          <el-col :span="2"><span>￥{{item.unitprice*item.count}}</span></el-col>
          <el-col :span="2"><el-button size="mini" @click="deleteItem(item)">删除</el-button></el-col>
        </el-row>
      </el-card>
    </el-card>
    <el-card class="footer">
      <el-row style="width:1400px">
        <el-col :span="2"><el-checkbox v-model="allChecked">全选</el-checkbox></el-col>
        <el-col :span="3"><el-button type="text" @click="deleteChecked">删除选中商品</el-button></el-col>
        <el-col :span="2"><el-button type="text">移入关注</el-button></el-col>
        <el-col :span="8"><div class="none"></div></el-col>
        <el-col :span="4"><span>已选择商品数量：</span><span style="color: #F56C6C">{{totalChecked}}</span></el-col>
        <el-col :span="2"><span>总价格：</span><span style="color: #F56C6C">￥{{totalPrice}}</span></el-col>
        <el-col :span="2"><el-button type="primary" @click="purchase">结算</el-button></el-col>
      </el-row>
    </el-card>
  </div>

</template>

<script>
export default {
  name: "shopCart",
  data() {
    return {
      total:0,
      address:'',
      allChecked: false
    };
  },
  watch: {
    allChecked(val){
      if(val==false){
        this.shopCart.forEach((item)=>{
          item.checked=false
        })
      }
      else if(val==true){
        this.shopCart.forEach((item)=>{
          item.checked=true
        })
      }
    }
  },
  computed:{
    userInfo(){
      return this.$store.getters.userInfo
    },
    shopCart(){
      return this.$store.getters.shopCart
    },
    totalPrice(){
      let totalPrice=0
      this.shopCart.forEach((item)=>{
        if(item.checked) totalPrice+=item.unitprice*item.count
      })
      return totalPrice
    },
    totalChecked(){
      let totalChecked=0
      this.shopCart.forEach((item)=>{
        if(item.checked) totalChecked+=item.count
      })
      return totalChecked
    },
  },
  methods:{
    deleteItem(item){
      this.$confirm('确认关闭？')
          .then(() => {
            this.shopCart.splice(this.shopCart.indexOf(item),1);
          })
          .catch(() => {
            this.$message.error('你到底要不要嘛')
          });

    },
    deleteChecked(){
      this.$confirm('确定删除嘛')
          //这里使用[...this.shopCart]而不用this.shopCart
          //[...str]为了ES6的推展运算符，可以在每次循环后，重置当前正在foreach的数组
          //...表示用于取出参数对象中的所有可遍历的属性，拷贝到当前对象之中
          //如果只要this.shopCart，每次循环操作永远都是在同一个数组，但是在这里面每一次删除都会让数组变化，然后出现问题
          .then(() => {
           [...this.shopCart].forEach((item)=>{
              if(item.checked) {
                this.shopCart.splice(this.shopCart.indexOf(item),1);
              }
            })

          })
          .catch(() => {
            this.$message.error('你到底要不要嘛')
          });

    },

    purchase(){

    }
  }
}
</script>

<style scoped>
#shopCart{
  min-width: 1000px;
}
.footer{
  position: fixed;
  bottom: 0;
}
</style>